<template>
  <div class="register">
    <el-card>
      <div slot="header">
        <span>后台管理人员注册</span>
      </div>
    </el-card>
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="账户：" prop="login">
        <el-input v-model="form.login"/>
      </el-form-item>
       <el-form-item label="密码：" prop="password">
        <el-input v-model="form.password"/>
      </el-form-item>
      <el-form-item label="电话：" prop="phone">
        <el-input v-model="form.phone"/>
      </el-form-item>
      <el-form-item label="年龄：" prop="age">
        <el-input v-model="form.age"/>
      </el-form-item>
      <el-form-item label="性别：" prop="sex">
        <el-radio v-model="sex" label="男">男</el-radio>
        <el-radio v-model="sex" label="女">女</el-radio>
      </el-form-item>
      <el-form-item label="学历：" prop="education">
        <el-select v-model="form.value" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-row>
        <el-col :offset="8">
          <el-button type="success" @click="registers()">确认注册</el-button>
          <el-button type="primary" @click="logins()">返回登录</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        form:{},
        sex: '1',
        options: [
          {value: '选项1', label: '小学'},
          {value: '选项2', label: '初中'},
          {value: '选项3', label: '高中'},
          {value: '选项4', label: '大专'},
          {value: '选项5', label: '本科'}],
        value: '',
        rules: {
          login: [{ required: true, message: '请输入正确的用户名' }],
          password:[{required:true,message:'请输入正确的密码'}],
          phone:[{required:true,message:'请输入正确的联系电话'}],
          age:[{required:true,message:'请输入正确的年龄'}],
        }
      }
    },
    methods:{
        logins(){
            this.$router.push('/lore/login')
        },
      registers(){
        this.$refs.form.validate(valid=>{
          if (!valid){
            return;
          }
          this.$http.post('/register',this.form).then(resp=>{
            var result=resp.data;
            if(result.status){
              this.$router.push('/');
            }else {
              this.$message.error(result.error);
            }
          })
        })
      }

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  .register{
    width: 360px;
    margin: 70px auto;
  }
</style>
